<script>

export default {
  name: "StarHorseIcon",
  props: {
    className: {
      type: String,
      default: ''
    }, iconClass: {
      type: String,
      required: true
    }, color: {
      type: String,
      default: '#409eff'
    }, size: {
      type: String,
      default: '20px'
    }
  },
  setup() {


  },
  computed: {
    classList() {
      let _this = this;
      return ['icon', _this.className || '']
    },
    iconName() {
      let _this = this;
      return `#${_this.iconClass}`;
    }
  }
}


</script>

<style scoped>
.icon { /* v-bind是Vue3才支持的功能，可以将CSS的值与js的值绑定 */
  width: v-bind('props.size');
  height: v-bind('props.size');
  position: relative;
  vertical-align: -2px;
  fill: currentColor;
}
</style>
<template>
  <svg :class = "classList" aria-hidden = "true">
    <use :xlink:href = "iconName" :fill = "color"/>
  </svg>
</template>



